<template>
  <div class="Professional animated fadeInUp">
    <projectlist
      :title="'专业园地'"
      :type="1"
      :projectlist="dataList.Professional"
      :subtitle="'Professional garden'"
    >
      <template v-slot:tabs>
        <el-checkbox-group
          v-model="checkboxGroup1"
          size="large"
          @change="changeCheckbox"
        >
          <el-checkbox-button
            v-for="city in dataList.tabList"
            :key="city.value"
            :label="city.value"
          >
            {{ city.label }}
          </el-checkbox-button>
        </el-checkbox-group>
      </template>
    </projectlist>
    <div class="paging" v-if="dataList.Professional.length">
      <el-pagination
        small
        :pager-count="5"
        background
        layout="prev, pager, next"
        :total="dataList.total"
        :current-page="dataList.page"
        @current-change="changesize"
      />
    </div>
  </div>
</template>

<script setup>
  import { reactive, ref, onBeforeMount } from "vue";
  import projectlist from "@/components/ProfessionalList.vue";
  import { getMaterialList } from "@/api/home.js";
  const changesize = (value) => {
    dataList.page = value;
    getMaterialListF();
  };
  const checkboxGroup1 = ref([]);
  const dataList = reactive({
    page: 1,
    total: 0,
    Professional: [],
    tabList: [
      {
        label: "专业标准",
        value: "0guxaawk57bajjiys2etpa",
      },
      {
        label: "专业调研",
        value: "9rcxaawkbbpjdt4pj9p4iw",
      },
      {
        label: "行业标准",
        value: "6hwxaawksqley7hwnaeokw",
      },
      {
        label: "行业信息",
        value: "arqxaawkbixp7t5fxi1ykq",
      },
      {
        label: "技能竞赛",
        value: "2h6xaawklkheqbe7770kha",
      },
      {
        label: "职业认证",
        value: "hsoxaawkwojiglyuqk-onw",
      },
      {
        label: "名师名家",
        value: "iyixaawk55bh2onjvestsq",
      },
      {
        label: "专业资料",
        value: "qlz6anokvr9gz1futhxmqw",
      },
    ],
    tabid: 0,
  });
  const changeCheckbox = () => {
    console.log(checkboxGroup1.value.join(","));
    getMaterialListF();
  };
  onBeforeMount(() => {
    getMaterialListF();
  });
  const getMaterialListF = () => {
    var data = {
      projectId: "dxhzalctqitlv9umq3wtdg",
      page: dataList.page,
      pagesize: 8,
      array_application: checkboxGroup1.value.join(","),
      hot: true,
    };
    getMaterialList(data).then((res) => {
      console.log(JSON.parse(res.list).obj);
      dataList.Professional = JSON.parse(res.list).obj || [];
      dataList.total = res.materialCount;
    });
  };
</script>

<style lang="scss" scoped>
  $width: 774px;

  @media screen and (min-width: 1200px) {
    .Professional {
      width: $width;
      margin: 26px auto 0;
    }

    .paging {
      width: 100%;
      margin-bottom: 50px;
      display: flex;
      justify-content: center;

      :deep(.is-active) {
        background-color: #ff9933 !important;
      }
    }

    .tab_list {
      width: 1200px;
      padding: 70px 170px 0 170px;
      display: flex;
      justify-content: space-between;

      li {
        width: 88px;
        height: 34px;
        line-height: 34px;
        background: #eeeeee;
        border-radius: 34vw;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        text-align: center;
        cursor: pointer;
      }

      .is_active {
        background-color: #ff9933;
        color: #ffffff;
      }
    }

    :deep .el-checkbox-group {
      width: $width;
      padding: 26px 50px 0;
      display: flex;
      justify-content: space-between;

      .el-checkbox-button {
        border: none !important;
      }

      .el-checkbox-button__inner {
        width: 71px;
        height: 24px;
        line-height: 24px;
        padding: 0;
        background: #eeeeee;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
        color: #000000;
        text-align: center;
        cursor: pointer;
        border: none !important;
      }
      .el-checkbox-button__inner:hover {
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
      }
    }

    :deep .is-checked {
      .el-checkbox-button__inner {
        background-color: #ff9933;
        color: #ffffff;
        border: none !important;
      }
    }
  }

  @media screen and (max-width: 1200px) {
    .Professional {
      width: 95vw;
      margin: 0 auto;
      margin-top: 5vw;
    }

    .paging {
      width: 95vw;
      margin-bottom: 6vw;
      display: flex;
      justify-content: center;
      :deep .is-active {
        background-color: #ff9933 !important;
      }
    }

    .tab_list {
      width: 95vw;
      padding: 0 2vw 2vw 2vw;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      li {
        width: 12vw;
        height: 4vw;
        line-height: 4vw;
        background: #eeeeee;
        border-radius: 34vw;
        font-size: 1.8vw;
        font-weight: 400;
        color: #333333;
        text-align: center;
        cursor: pointer;
        margin-bottom: 2vw;
      }

      .is_active {
        background-color: #ff9933;
        color: #ffffff;
      }
    }
    :deep(.el-checkbox-group) {
      width: 97vw;
      display: flex;
      // justify-content: space-between;
      flex-wrap: wrap;
      .el-checkbox-button {
        border: none !important;
        margin-bottom: 3vw;
        margin: 0 1vw 3vw 1vw;
      }
      .el-checkbox-button__inner {
        // width: 88px;
        // height: 34px;
        // line-height: 34px;
        padding: 1vw 2vw;
        background: #eeeeee;
        border-radius: 34vw;
        font-size: 1.8vw;
        font-weight: 400;
        color: #333333;
        text-align: center;
        cursor: pointer;
        border: none !important;
      }
    }

    :deep(.is-checked) {
      .el-checkbox-button__inner {
        background-color: #ff9933;
        color: #ffffff;
        border: none !important;
        // border-color: #FF9933!important;
        // border-left-color:#FF9933!important;
      }
    }
  }
</style>
